<template>
	<div class="select-top-compont-box" @click.stop.prevent="wrapBox($event)">
		<div class="connect-box" ref="connectBox">
			<header>				
				<div class="select-all-box" @click="clickSelectAll">
					<div class="yellow-left-arrow"></div>
					<p>浏览全部</p>
				</div>
				<div class="selectCity" @click="pushProvincePage">
					<p>{{province}}</p>
					<div class="arrow-down"></div>
				</div>
			</header>
			<div class="connect">
				<ul>
					<li v-for="v  in  dataArray" key="v.id">
						<p class="connect-p">{{v.tagName}}</p>
						<ul class="connect-childen-ul">
							<li v-for="(v,index) in  v.children" :class="[curId==v.id?'curClass':'']" key="v.id" @click.stop.prevent="clickValue(v,v.id)">{{v.tagName}}</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataArray:JSON.parse(window.localStorage.getItem('topBJDataArray')),//数组数据
				curId:'',//默认高亮
				province:'',//省会
			}
		},
		components: {},
		created() {
			//this.getSelectTopData();
			//加载组件 选项高亮
			//console.log(this.$route.query.id)
			let topBJ = window.localStorage.getItem('setBJ'+this.$route.query.id)
			if(topBJ){//有值				
				this.curId =JSON.parse(topBJ).id
			}else{//无值
				this.curId = ''
			}
			//设置头部右边的省会
			let province = window.localStorage.getItem('setProvince'+this.$route.query.id)
			//console.log(province)
			if(province ){//有值
				this.province = JSON.parse(province).value
			}else{
				this.province = '全国'
			}
		},
		methods: {
			//选择省会页面
			pushProvincePage(){
				//this.$router.push(`/${this.$channel}/selectProvince`)
				this.$router.push({
					path:`/${this.$channel}/selectProvince`,
					query:{//父标签的id
						id:this.$route.query.id
					}
				})
			},			
			wrapBox(e){//关闭
				let _this =this
                  var connectBox = _this.$refs.connectBox;
				if(connectBox.contains(e.target)){//里面
					
				}else{//外面
					_this.$emit("message", {type: "close"});
				}
		 },
		 clickSelectAll(){//点击选择全部
		 let obj = 	{"id":"","tagName":"全部","parentId":"","tagType":"","level":"","cid":null,"children":[]}
		 window.localStorage.setItem("setBJ"+this.$route.query.id,JSON.stringify(obj));
		 	setTimeout(()=>{
				this.$emit("message", {type: "close"});
			},100)			
			this.$emit("message", {type: "data",data: obj});
		 },
		clickValue(v,id){//点击选择当前项目
			this.curId = id;
			window.localStorage.setItem("setBJ"+this.$route.query.id,JSON.stringify(v))
			//console.log(v)
			setTimeout(()=>{
				this.$emit("message", {type: "close"});
			},100)			
			this.$emit("message", {type: "data",data: v});
		}
		}
	}
</script>

<style scoped="scoped">
	.curClass{
		color:#a80000!important;
		background:rgba(255,0,0,0.15) !important;
	}
	.select-top-compont-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.select-all-box{
		width: 200px;
		height: 46px;
		background: white;
		margin-left: 60px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size:28px;
		font-weight:400;
		color:rgba(238,176,82,1);
	}
	.yellow-left-arrow{
		width: 10px;
		height: 18px;
		background: url(../../../assets/images/yellow-left-arrow.png) no-repeat;
		background-size: 10px 18px;
		margin-right: 15px;
	}
	.connect-box {
		width: 610px;
		height: 900px;
		background: rgba(255, 255, 255, 1);
		border-radius: 20px;
	}
	
	header {
		width: 100%;
		height: 46px;
		/*background: pink;*/
		text-align: center;
		line-height: 46px;
		position: relative;
		margin: 65px 0 62px 0;
	}
	
	.title {
		font-size: 36px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	
	.selectCity {
		height: 46px;
		/*background: seagreen;*/
		float: right;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		right: 50px;
	}
	.selectCity p {
		font-size:28px;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.arrow-down {
		width: 32px;
		height: 33px;
		background: url(../../../assets/images/arrow-down.png) no-repeat;
		background-size: 32px 33px;
		margin-left: 10px;
	}
	.connect{
		padding: 0 60px;
		width: 100%;
		height: 749px;
		overflow-y: scroll;
	}
	.connect ul {
		float: left;
	}
	.connect-p{
		width: 100%;
		font-size:28px;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.connect-childen-ul{
		background: white;
		float: left;
		width: 100%;
	}
	.connect-childen-ul li{
		min-width:120px;
		height:60px;
		background:rgba(243,243,243,1);
		border-radius:12px;
		text-align: center;
		line-height: 60px;
		display: inline-block;
		font-size:24px;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin:20px;
		padding: 0 20px;
	}
</style>